import { useProjectStore } from '@app-nextmesh/store/project';
import { Select } from 'antd';
import { PlotSource } from './types';

export default function ResultSelect({
  source,
  onChange,
}: {
  source: PlotSource;
  onChange: (source: PlotSource) => void;
}) {
  const projectInfo = useProjectStore((state) => state.projectInfo);
  const list = projectInfo?.results;
  const items =
    list?.map((item, index) => (
      <Select.Option
        key={index}
        value={item.uuid}>
        {item.name}
      </Select.Option>
    )) ?? [];
  return (
    <>
      <div
        style={{
          display: 'flex',
          justifyContent: 'flex-end',
          flexDirection: 'column',
        }}>
        <Select
          value={source?.uuid || ''}
          disabled={projectInfo?.readonly}
          popupMatchSelectWidth={false}
          onChange={(value) => {
            const item = list?.find((item) => item.uuid === value);
            if (!item) {
              return;
            }
            onChange({
              ...source,
              uuid: item.uuid,
            });
          }}>
          {items}
        </Select>
      </div>
    </>
  );
}
